<template>
    <view>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <wlk-navbar title="订单中心" navbarType='3'></wlk-navbar>
        <u-sticky bgColor="#fff">
            <view class="content-tabs">
                <u-tabs
                        :activeStyle="{
                        fontSize: '28rpx',
                        padding:'0 3rpx',
                        color:themeColor,
                        fontWeight: 'bold',
                        transform: 'scale(1.05)'
                    }"
                        :itemStyle="{
                         height: '40px',
                         alignItems:'flex-start',
                         padding:'0 30rpx',
                    }"
                        :inactiveStyle="{
                        fontSize: '28rpx',
                        padding:'0 3rpx',
                        transform: 'scale(1)'
                    }"
                        :list="tabs"
                        lineWidth="35"
                        lineHeight="2"
                        :lineColor="themeColor"
                        :current="current"
                        @change="changeTab"
                ></u-tabs>
            </view>
        </u-sticky>
        <u-popup :customStyle="{width:'92%',whiteSpace: 'nowrap',padding:'30rpx 30rpx'}" round="10" closeable :show="showCode" closeOnClickOverlay mode="center" @close="close">
            <block v-if="!$u.test.isEmpty(codeList)">
                <scroll-view scroll-x="true" class="scroll mt50">
                    <view @click="codeIndex=index" v-for="(code,index) in codeList" class="code-list mr20 center br08">
                        <u--text  :color="index==codeIndex?themeColor:''" :bold="index==codeIndex" :text="'核销码'+(index+1)" size="14"></u--text>
                    </view>
                </scroll-view>
                <view class="mt50 wlkflex justify-center relative wrap">
                    <view class="wlkflex justify-center">
                      <l-painter :css="{width: '280rpx',height:'280rpx',position:'relative'}">
                        <template>
                          <l-painter-view>
                            <l-painter-qrcode
                                :css="{width: '280rpx',height:'280rpx'}"
                                :text="codeList[codeIndex]?codeList[codeIndex].url:''"
                            />
                          </l-painter-view>
                          <l-painter-view v-if="codeList[codeIndex].status > 1"
                                          css="position: absolute;display:flex;justify-content:center;align-items:center;height: 280rpx;width: 280rpx;background-color: rgba(255,255,255,0.8)">
                            <l-painter-image
                                css="width: 140rpx"
                                src="/static/images/verify.png"
                            />
                          </l-painter-view>
                        </template>
                      </l-painter>
                    </view>
                    <view class="wd100 mt30 wlkflex justify-center" @tap.stop="$Router.push('/pages/merch/list')">
                        <u-button :customStyle="{
			            margin:'0',
			            width:'50%',
			            fontSize:'14rpx',
			            height:'90rpx'
                         }" :color="themeColor" icon="map" iconColor="#FFFFFF"  shape="circle"  text="适用商家"></u-button>

                    </view>
                </view>

                <u-divider text="核销信息"></u-divider>
                <view class="info">
                    <view class="wlkflex">
                        <view class="title col9">核销码：</view>
                        <view class="input">{{codeList[codeIndex].code}}</view>
                        <view class="copy_btn ml10 br04" @click="toCopy(codeList[codeIndex].code)">点击复制</view>
                    </view>
                    <view class="wlkflex mt10">
                        <view class="title col9">状态：</view>
                        <view class="input">{{codeList[codeIndex].status_text}}</view>
                    </view>
                    <view class="wlkflex mt10" v-if="codeList[codeIndex].status >= 1">
                        <view class="title col9">核销时间：</view>
                        <view class="input">{{$u.timeFormat(codeList[codeIndex].verifytime, 'yyyy-mm-dd hh:MM:ss')}}</view>
                    </view>
                </view>
            </block>
        </u-popup>
        <view class="coupon-content">
            <block v-if="loadStatus=='nomore' && list.length==0">
                <view class="not-data">
                    <u-empty
                            :icon="uEmpty.order"
                            text="暂无订单"
                    >
                    </u-empty>
                </view>
            </block>
            <block v-else>
                <block v-if="state!='refund'">
                    <view v-for="item in list" class="bgw item-box br04 overHidden">
                        <view class="order" @click="$Router.push('/pages/order/detail?id='+item.id)">
                            <view class="order-head wlkflex justify-between mb30">
                                <view class="o-head-sn">
                                    订单编号：{{item.order_sn}}
                                </view>
                                <view class="o-head-status">
                                    <u--text type="warning" v-if="item.status=='0'" align="right" size="14" :text="item.status_text"></u--text>
                                    <u--text type="info" v-if="item.status<'0'" align="right" size="14" :text="item.status_text"></u--text>
                                    <u--text type="error" v-if="item.status>'0'" align="right" size="14" :text="item.status_text"></u--text>
                                </view>
                            </view>
                            <view class="order-info mt20 wlkflex justify-between wd100 align-start" v-for="good in item.item">
                                <view class="o-info-img br04 overHidden">
                                    <image class="wd100 hg100" lazy-load :src="good.goods_images[0]"  mode="aspectFill"/>
                                </view>
                                <view class="o-info-main">
                                    <view class="o-main-title u-line-2">
                                        {{good.goods_title}}
                                    </view>
                                    <view class="wlkflex justify-between mt10">
                                        <view class="o-main-date">
                                            x <text class="ml05">{{good.goods_quantity}}</text>
                                        </view>
                                        <view class="o-main-price bold">
                                            ¥ <text>{{good.total_fee}}</text>
                                        </view>
                                    </view>
                                    <view class="wlkflex justify-between mt20">
                                        <block v-if="good.refund_id>0">
                                            <u-text type="info"  align="right" size="14" :text="good.refund_info.refund_status_text"></u-text>
                                        </block>
                                        <block v-else>
                                          <block v-if="item.status>0">
                                            <view  @click.stop="qrCode(good.verify_info.list)" class="o-main-qrcode wlkflex justify-between">
                                              <i class="gg-tikcode" style="color:#666;transform: scale(.8);"></i>
                                              <text class="ml05">核销码</text>
                                            </view>
                                          </block>
                                          <block v-else>
                                            <view></view>
                                          </block>
                                            <view class="o-main-status">
                                                <block v-if="item.status==0">
                                                    <u-text type="error" align="right" size="14" :text="item.status_text"></u-text>
                                                </block>
                                                <block v-else>
                                                    <u-text type="warning" v-if="good.verify_info.status=='0'" align="right" size="14" :text="good.verify_info.status_text"></u-text>
                                                    <u-text :color="themeColor" v-if="good.verify_info.status == '1'" align="right" size="14" :text="good.verify_info.status_text"></u-text>
                                                    <u-text type="info" v-if="good.verify_info.status>'1'" align="right" size="14" :text="good.verify_info.status_text"></u-text>
                                                </block>
                                            </view>
                                        </block>
                                    </view>
                                </view>
                            </view>
                            <view class="o-total-price mt20 bold">
                                合计 ￥<text>{{item.total_fee}}</text>
                            </view>
                            <view class="o-button wlkflex justify-end mt20" v-if="item.status=='0'">
                                <view style="width: 25%" @tap.stop="$Router.push('/pages/pay/pay?type=goods&id='+item.id)">
                                    <u-button :customStyle="{
			            margin:'0',
			            width:'100%',
			            fontSize:'14rpx',
			            height:'70rpx'
                         }" :color="themeColor" plain shape="circle"  text="立即支付"></u-button>

                                </view>
                            </view>
                        </view>
                    </view>
                </block>
                <block v-else>
                    <view v-for="item in list" class="bgw item-box br04 overHidden">
                        <view class="order" @click="$Router.push('/pages/order/refund?id='+item.id)">
                            <view class="order-head wlkflex justify-between mb30">
                                <view class="o-head-sn">
                                    退单编号：{{item.refund_sn}}
                                </view>
                                <view class="o-head-status">
                                    <u--text type="warning" v-if="item.refund_status=='0'" align="right" size="14" :text="item.refund_status_text"></u--text>
                                    <u--text type="info" v-if="item.refund_status<'0'" align="right" size="14" :text="item.refund_status_text"></u--text>
                                    <u--text type="error" v-if="item.refund_status>'0'" align="right" size="14" :text="item.refund_status_text"></u--text>
                                </view>
                            </view>
                            <view class="order-info mt20 wlkflex justify-between wd100 align-start">
                                <view class="o-info-img br04 overHidden">
                                    <image class="wd100 hg100" lazy-load :src="item.orderItem.goods_images[0]"  mode="aspectFill"/>
                                </view>
                                <view class="o-info-main">
                                    <view class="o-main-title u-line-2">
                                        {{item.orderItem.goods_title}}
                                    </view>
                                    <view class="wlkflex justify-between mt10">
                                        <view class="o-main-date">
                                            x <text class="ml05">{{item.orderItem.goods_quantity}}</text>
                                        </view>
                                        <view class="o-main-price bold">
                                            ¥ <text>{{item.orderItem.total_fee}}</text>
                                        </view>
                                    </view>
                                </view>
                            </view>
                            <view class="o-total-price mt20 bold">
                                退款金额 ￥ <text>{{item.refund_fee}}</text>
                            </view>

                        </view>
                    </view>
                </block>

                <view class="load-more">
                    <u-loadmore :status="loadStatus" :loading-text="loadingText"  :loadmore-text="loadmoreText" :nomore-text="nomoreText" dashed  line />
                </view>
            </block>
        </view>
    </view>
</template>

<script>
    var _self;
    import { toUrl,copy } from '@/wlkutils/tools';
    import { mapGetters} from 'vuex';
    export default {
        computed:{
            ...mapGetters(['themeColor','uEmpty','images']),
        },
        data() {
            return {
                showCode:false,
                list:[],
                codeList:[],
                tabs:[
                    {state:'all',name:'全部'},
                    {state:0,name:'待付款'},
                    {state:1,name:'待核销'},
                    {state:2,name:'清洗中'},
                    {state:'refund',name:'退款售后'},
                    {state:3,name:'已完成'},
                ],
                page: 1,
                loadStatus:'loading',
                loadingText: '努力加载中',
                loadmoreText: '轻轻上拉',
                nomoreText: '实在没有了',
                current:0,
                codeIndex:0,
                state:'all',
            };
        },
        onLoad(option) {
            _self = this;
        },
        onShow() {
            let state = this.$Route.query.state;
            if (this.$Route.query.state){
                _self.tabs.forEach((item,index)=>{
                    if (item.state==state){
                        _self.current = index;
                        _self.state = item.state;
                    }
                })
            }else{
                _self.current = 0;
                _self.state = 'all';
            }
            this.init();
        },
        onReachBottom() {
            if(this.loadStatus == "nomore"){
                return;
            }
            this.page++;
            this.getData();
        },
        methods: {
            changeTab(item){
                this.current = item.index;
                this.state = this.tabs[this.current].state;
                this.init();
            },
            init(){
                this.loadStatus = 'loading';
                this.page = 1;
                this.list = [];
                this.getData();
            },
            change(v){
                if(uni.$u.test.isEmpty(v)){
                    this.init();
                }
            },
            async getData() {
                const res = await uni.$u.http.post("order/getList", {
                    page: this.page,
                    state:this.state,
                    type:'goods'
                });
                console.log(res)
                if (res && res.data && res.data.rows) {
                    this.list = this.list.concat(res.data.rows);
                }
                this.loadStatus = res.data.rows.length < res.data.limit ? 'nomore' : 'loadmore';
            },
            qrCode(list){
                this.codeList = list;
                this.showCode = true;
            },
            toCopy(v){
                copy(v)
            },
            close(){
                this.showCode=false;
                this.codeIndex = 0;
            }
        },
    };
</script>

<style lang="scss">
    page{
        /*background-color: #FFFFFF;*/
        .content-tabs{
            background-color: #FFFFFF;
            padding-top: 20rpx;
            width: 100%;
            border-bottom: 1px solid #F3F3F3;
            height: 49px;
        }
        .scroll{
            .code-list{
                font-size: $font-base;
                padding: 25rpx 30rpx;
                background-color: #F3F3F3;
                display: inline-block;
            }
        }
        .verify-status{
            position: absolute;
            height: 280rpx;
            width: 280rpx;
            background-color: rgba(255,255,255,0.8);
            top:0;
            image{
                width: 140rpx;
            }
        }
        .foot{
            font-size: $font-base;
            margin: 40rpx 0 40rpx 0;
        }
        .info{
            font-size: $font-base;
            .title{

            }
            .copy_btn{
                background-color: #F3F3F3;
                color: #666;
                padding: 5rpx 10rpx;
            }
        }
        .coupon-content {
            .item-box{
                margin: 30rpx;
                .order{
                    padding: 20rpx 30rpx 30rpx 30rpx;
                    .order-head{
                        font-size: $font-base;
                        .o-head-sn{
                            width: 80%;
                        }
                        .o-head-status{
                            width: 20%;
                            text-align: right;
                            color: red;
                        }
                    }
                    .order-info{
                        .o-info-img{
                            width: 200rpx;
                            height:  200rpx;
                            text-align: center
                        }
                        .o-info-main{
                            width: 65%;
                            .o-main-title{
                                font-size: $font-lt;
                                font-weight: bold;
                            }
                            .o-main-date{
                                font-size: $font-sm;
                                color: #666;
                            }
                            .o-main-price{
                                font-size: $font-sm;
                                color: #333333;
                                text{
                                    font-size: $font-base;
                                }
                            }
                            .o-main-qrcode{
                                border-radius: 80rpx;
                                padding: 10rpx 20rpx;
                                font-size: $font-sm;
                                background-color: #f3f3f3;
                                color: #666666;
                            }
                            .o-main-status{}
                            .o-main-user{
                                font-size: $font-sm;
                                color: #666;
                            }
                        }
                    }
                    .o-total-price{
                        text-align: right;
                        font-size: $font-sm;
                        color: #333333;
                        text{
                            font-size: $font-base;
                        }
                    }
                    .o-button{
                        text-align: right;
                        padding: 20rpx 0 0 0;
                        border-top: $-dashed-border;
                    }

                }
                .insure{
                    padding: 20rpx 30rpx 30rpx 30rpx;
                    .insure-head{
                        font-size: $font-base;
                        .i-head-sn{
                            width: 80%;
                        }
                        .i-head-status{
                            width: 20%;
                            text-align: right;
                            color: red;
                        }
                    }
                    .insure-info{
                        font-size: $font-base;
                    }
                    .o-total-price{
                        text-align: right;
                        font-size: $font-base;
                    }
                }
            }

        }
    }

</style>
